<%@ page language="java"  pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/common/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <%@ include file="/WEB-INF/views/common/resource.jsp" %>
    <script>
        var ctx = '${ctx}';
    </script>
</head>
<body>
<div class="page order">
    <div class="head_box">
        <div class="type_chose_box order">
            <ul>
                <li class="onthis" onclick="showAll()">所有订单</li>
                <li onclick="show1()">待接单</li>
                <li onclick="show2()">待收货</li>
                <li onclick="show3()">已完成</li>
                <li onclick="show4()">已关闭</li>
            </ul>
        </div>
    </div>
    <div class="order_list_box">
        <ul class="order_list">
            <c:forEach items="${order_list}" var="order">
                <li class="orders ${order.order_status}" onclick="location.href='${ctx}/shop/toOrderDetail.do?order_no=${order.order_no}'">
                    <div class="order_title">
                        <h1>订单号${order.order_no}</h1>
                        <span>${order.create_time}</span>
                    </div>
                    <div class="order_content">
                        <c:forEach items="${order.order_details}" var="details" begin="0" end="2">
                            <div class="order_img"><img src="${details.goods_img}" width="60" height="40" /></div>
                        </c:forEach>

                        <div class="order_price">
                            <h1>共${fn:length(order.order_details)}件商品</h1>
                            <p>合计¥${order.order_price}</p>
                            <i class="iconfont icon-jiantou"></i>
                        </div>
                    </div>
                </li>

            </c:forEach>


            <%--<li>--%>
                <%--<div class="order_title">--%>
                    <%--<h1>订单号1234567895555555</h1>--%>
                    <%--<span>2017-08-23 12:12:12</span>--%>
                <%--</div>--%>
                <%--<div class="order_content">--%>
                    <%--<div class="order_img"><img src="${itx}/images/demo/demo.jpg" width="60" height="40" /></div>--%>
                    <%--<div class="order_img"><img src="${itx}/images/demo/demo.jpg" width="60" height="40" /></div>--%>
                    <%--<div class="order_img"><img src="${itx}/images/demo/demo.jpg" width="60" height="40" /></div>--%>
                    <%--<div class="order_price">--%>
                        <%--<h1>共3件商品</h1>--%>
                        <%--<p>合计¥666</p>--%>
                        <%--<i class="iconfont icon-jiantou"></i>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</li>--%>
        </ul>
    </div>


    <div class="clear"></div>
    <c:if test="${fn:length(order_list)<1}">
        <div class="non_order_box" >
            <img src="${itx}/images/non_icon.png" width="45%" />
            <p>您还没有相关订单，现在就去挑选</p>
            <input type="button" value="去瞧瞧" />
        </div>
    </c:if>

    <div class="non_order_box" id="no_order" style="display: none">
        <img src="${itx}/images/non_icon.png" width="45%" />
        <p>您还没有相关订单，现在就去挑选</p>
        <input type="button" onclick="location.href='${ctx}/shop/shopIndex.do'" value="去瞧瞧" />
    </div>


    <div class="footer">
        <ul>
            <li>
                <i class="iconfont icon-icon95" onclick="location.href='${ctx}/shop/shopIndex.do'"></i>
                <span>主页</span>
            </li>
            <li class="onthis">
                <i class="iconfont icon-dingdan" onclick="location.href='${ctx}/shop/toOrderList.do'"></i>
                <span>订单</span>
            </li>
            <li>
                <i class="iconfont icon-iconziti23"></i>
                <span>新品</span>
            </li>
            <li onclick="location.href='${ctx}/shop/toShopCenter.do'">
                <i class="iconfont icon-wode" ></i>
                <span>我的</span>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    $('.type_chose_box ul li').click(function(e){
        $('.type_chose_box ul li').removeClass('onthis');
        $(this).addClass('onthis');
    });

    //显示等待接单
    function showAll() {
        $('.orders').show();
        var i=0;
        $('.orders').each(function () {
            i++;
        });
        if(i<1){
            $('#no_order').show();
        }else{
            $('#no_order').hide();
        }
    }

    //显示等待接单
    function show1() {
        $('.orders').hide();

        var i=0;
        $('.WAITING_FOR_RECEIVING_ORDER').each(function () {
            i++;
        });
        if(i<1){
            $('#no_order').show();
        }else{
            $('#no_order').hide();
        }
        $('.WAITING_FOR_RECEIVING_ORDER').show();
    }

    //显示等待收货
    function show2() {
        $('.orders').hide();
        $('.WAITING_FOR_DELIVERY').show();

        var i=0;
        $('.WAITING_FOR_DELIVERY').each(function () {
            i++;
        });
        if(i<1){
            $('#no_order').show();
        }else{
            $('#no_order').hide();
        }
    }

    //显示已完成
    function show3() {
        $('.orders').hide();
        $('.FINISHED').show();

        var i=0;
        $('.FINISHED').each(function () {
            i++;
        });
        if(i<1){
            $('#no_order').show();
        }else{
            $('#no_order').hide();
        }
    }

    //显示已关闭
    function show4() {
        $('.orders').hide();
        $('.CLOSED').show();

        var i=0;
        $('.CLOSED').each(function () {
            i++;
        });
        if(i<1){
            $('#no_order').show();
        }else{
            $('#no_order').hide();
        }
    }

</script>
</html>
